<template>
  <view class="clock-in-form">
    <uni-page-header title="打卡" />
    <view class="form-container">
      <u-upload
        name="clockin_img"
        accept="image"
        capture="camera"
        :max-count="9"
        :file-list="imgList"
        upload-text="添加4-9张图片"
        @afterRead="onAfterRead"
        @delete="onImgDelete"
      />

      <u--textarea v-model="formData.content" placeholder="请输入内容" border="bottom" />
    </view>

    <view v-if="sampleImg" class="sample-img">
      <u-divider />
      <view class="img">
        <image :src="sampleImg" mode="widthFix" class="img-value" @click="onPreview" />
      </view>
    </view>

    <view class="action-btn">
      <u-button color="#78ffe6" text="提交打卡" :loading="submitLoading" @click="onSubmit" />
    </view>
  </view>
</template>

<script>
import {
  mapState,
  mapActions
} from 'vuex'
import {
  getImg,
  getCurrentPageConfigByName,
  uploadFile
} from '../utils/index.js'
import {
  wx_customer_clockin
} from '../api/index.js'
export default {
  name: 'ClockInForm',
  data() {
    return {
      imgList: [],
      sampleImg: '',
      formData: {
        image: '',
        is_reclock: false, // 是否是补卡
        ruleid: null,
        content: ''
        // reclock_date: ''
      },
      reclock_date: '',
      submitLoading: false
    }
  },
  computed: {
    ...mapState(['clockInRuleData'])
  },
  onLoad(params) {
    // this.formData.reclock_date = params.reclock_date || ''
    this.reclock_date = params.reclock_date || ''
    this.formData.is_reclock = params.reclock_date ? true : false
    getCurrentPageConfigByName('打卡参考图').then(res => {
      console.log('打卡-参考图片配置数据')
      console.log(res)
      const {
        bg_image
      } = res
      this.sampleImg = bg_image ? getImg(bg_image) : ''
    })
  },
  methods: {
    ...mapActions(['getUserInfo']),

    async onAfterRead(data) {
      const _this = this
      const {
        size,
        url,
        type
      } = data.file
      const uploadRes = await uploadFile(url, size, {
        filetype: type,
        name: 'file'
      })
      console.log('图片上传结果')
      console.log(uploadRes)
      const linkUrl = getImg({
        i: uploadRes.fileid,
        n: 'clockin_img'

      })
      console.log('上传后的服务器图片链接')
      console.log(linkUrl)
      this.imgList.push({
        i: uploadRes.fileid,
        n: 'clockin_img',
        t: 0,
        fileId: uploadRes.fileid,
        url: linkUrl
      })
      // uni.compressImage({
      //   src: data.file.url,
      //   compressedWidth: 800,
      //   compressedHeight: 600,
      //   success: async(res) => {
      //     console.log('图片压缩成功')
      //     console.log(res)
      //     const {
      //       tempFilePath
      //     } = res
      //     const uploadRes = await uploadFile(tempFilePath)
      //     console.log('图片上传结果')
      //     console.log(uploadRes)
      //     // _this.imgList.push({
      //     //   url: tempFilePath
      //     // })
      //   },
      //   fail: (error) => {
      //     console.log('图片压缩失败')
      //   }
      // })
    },

    onImgDelete(data) {
      const {
        index,
        file
      } = data
      this.imgList.splice(index, 1)
    },

    onPreview() {
      this.$utils.previewImg([this.sampleImg])
    },

    async onSubmit() {
      if (this.imgList.length === 0) {
        this.$utils.showToast('请上传图片')
        return
      }
      if (this.imgList.length < 4) {
        this.$utils.showToast('最少添加4张图片')
        return
      }
      if (this.formData.content === '') {
        this.$utils.showToast('请填写打卡内容')
        return
      }
      this.formData.image = JSON.stringify(this.imgList.map(e => {
        const {
          i,
          n,
          t
        } = e
        return {
          i,
          n,
          t
        }
      }))
      this.formData.ruleid = this.clockInRuleData.id
      console.log('打卡提交的数据')
      console.log(this.formData)
      // return
      let params = {
        ...this.formData
      }
      if (this.reclock_date) {
        this.$set(params, 'reclock_date', this.reclock_date)
      }
      try {
        this.submitLoading = true
        await wx_customer_clockin(params)
        this.$utils.showToast('打卡成功')
        this.submitLoading = false
        // 重新获取用户信息，更新用户总青币数
        this.getUserInfo()
        uni.$emit('save-update-clockin', {
          data: 'update'
        })
        this.$utils.switchTabToPage('/pages/clockIn')
      } catch (error) {
        this.submitLoading = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
	.clock-in-form {
		.form-container {
			padding: 20rpx;
			background-color: #FFF;
		}

		.sample-img {
			width: 90%;
			margin: auto;

			// @include flex-column-center;
			// flex-flow: column;
			// gap: 20rpx;
			.img {
				@include flex-center;

				.img-value {
					width: 100%;
					height: 400px !important;
				}
			}
		}

		::v-deep.u-upload__button {
			border-radius: 10rpx;
			background-color: #e6e6e6;
		}
	}

	::v-deep.action-btn {
		width: 100%;
		height: 200rpx;
		@include flex-center;

		button {
			width: 60%;
			color: #000 !important;
			font-weight: bolder;
		}
	}
</style>
